<template>
  <view class="nav-box">
    <view class="invite-box u-flex-y-center u-m-b-20">
      <image src="@/static/images/04_8uihd.png" class="" mode=""></image>
      <view class="u-flex-1 u-flex-y-center u-flex-between">
        <text>邀请好友一起玩</text>
        <view class="invite-btn" @click="$u.route('/pages/houseMine/minePoster')">去邀请</view>
      </view>
    </view>
    <u-text text="推荐的客户" color="#000" size="15" bold></u-text>
    <u-text :text="`邀请人数：${data.total}人`" color="#000" size="14" margin="20rpx 0 0 0"></u-text>
  </view>
  <view class="custom-item u-flex-y-center u-p-20" @click="handleDetail" v-for="(item,index) in list" :key="item.id">
    <u-image :src="prefixURL(item.avatar)" shape="circle" width="80rpx" height="80rpx"></u-image>
    <view class="u-m-l-16 u-flex-1">
      <view class="u-flex-y-center">
        <u-text :text="`${item.nickname} ${item.mobile}`" color="#000" size="14"></u-text>
        <u-text :text="item.invite?.invite_level" align="right" color="#000" v-if="type == 3" size="14"></u-text>
      </view>
      <view class="u-flex-y-center">
        <u-text :text="`注册时间：${item.createtime}`" color="#666" size="12"></u-text>
        <u-text :text="`邀请人${item.invite?.invite_level}`" align="right" v-if="type == 3" color="#666"
          size="12"></u-text>
      </view>
    </view>
  </view>
  <up-overlay :show="data.show" @click="data.show = false">
    <view class="custom-box" @click.stop="">
      <image src="@/static/images/04_7gb.png" class="custom-close" @click.stop="data.show = false"></image>
      <image src="@/static/images/01_bj.png" class="custom-avatar" mode=""></image>
      <u-text align="center" text="王" size="18" margin="20rpx 0 0 0" bold color="#000"></u-text>
      <u-text align="center" size="14" color="#000" margin="20rpx 0 0 0" text="13065032563"></u-text>
      <u-text align="center" size="14" color="#000" margin="20rpx 0 40rpx 0" text="邀请时间：2025/02/02 12:00:00"></u-text>
      <view class="custom-btn">电话咨询</view>
    </view>
  </up-overlay>

  <back-page></back-page>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import { onShow, onReachBottom } from '@dcloudio/uni-app'
  import { broker_custom, mineCustom, mineTeam, staffBroker } from '../../config/api';
  import { prefixURL } from '../../util/util';
  const props = defineProps({
    type: {
      type: [String, Number],
      default: 1
    }
  })
  const data = ref({
    show: false,
    total: 0
  })
  const list = ref([])
  const params = ref({
    page: 1,
    limit: 15
  })
  uni.setNavigationBarTitle({
    title: props.type == 1 ? '我的客户' : props.type == 2 ? '我的团队' : '推荐的经纪人'
  })
  onShow(() => {
    initList()
  })
  onReachBottom(() => {
    params.value.page++
    initList()
  })
  const initList = () => {
    if (props.type == 1) _mineCustom()
    if (props.type == 2) _mineTeam()
    if (props.type == 3) _staffBroker()
    if (props.type == 4) _broker_custom()
  }
	// 我推荐的普通用户
	const _broker_custom =()=>{
		broker_custom(params.value).then(res => {
		  data.value.total = res.data.total
		  if (params.value.page == 1) list.value = res.data.data
		  else list.value = list.value.concat(res.data.data)
		})
	}
  // 推荐的经纪人
  const _staffBroker = () => {
    staffBroker(params.value).then(res => {
      data.value.total = res.data.total
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
  // 我的团队
  const _mineTeam = () => {
    mineTeam(params.value).then(res => {
      data.value.total = res.data.total
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
  // 我的客户
  const _mineCustom = () => {
    mineCustom(params.value).then(res => {
      data.value.total = res.data.total
      if (params.value.page == 1) list.value = res.data.data
      else list.value = list.value.concat(res.data.data)
    })
  }
  const handleDetail = () => {
    data.value.show = true
  }
</script>

<style lang="scss" scoped>
  .nav-box {
    background: #fff;
    padding: 24rpx;

    .invite-box {
      height: 104rpx;
      background: #F87610;
      border-radius: 24rpx;
      font-weight: 800;
      font-size: 28rpx;
      color: #fff;
      padding: 0 36rpx;

      image {
        width: 58rpx;
        height: 52rpx;
        margin-right: 22rpx;
      }

      .invite-btn {
        width: 158rpx;
        height: 56rpx;
        background: #FFFFFF;
        color: #F87610;
        border-radius: 32rpx;
        text-align: center;
        line-height: 56rpx;
        font-weight: 400;
      }
    }
  }

  .custom-item {
    background: #fff;
    border-radius: 20rpx;
    margin: 20rpx;
  }

  .custom-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 638rpx;
    height: 494rpx;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7E8E1 100%);
    border-radius: 32rpx;
    padding-top: 40rpx;

    .custom-btn {
      width: 340rpx;
      height: 72rpx;
      background: #F87610;
      border-radius: 44rpx;
      margin: auto;
      text-align: center;
      line-height: 72rpx;
      font-size: 28rpx;
      color: #fff;
    }

    .custom-avatar {
      width: 116rpx;
      height: 116rpx;
      border-radius: 50%;
      display: block;
      margin: auto;
    }

    .custom-close {
      width: 32rpx;
      height: 30rpx;
      position: absolute;
      top: 26rpx;
      right: 26rpx;
    }
  }
</style>